/*
 * @Author: liangliang
 * @Date: 2023-05-18 15:40:29
 * @LastEditors: yusha
 * @LastEditTime: 2023-08-25 10:14:43
 * @Description: 线上bug登记
 */

import React, { useState, useEffect } from 'react';
import { useAntdTable } from 'ahooks';
import {
    Button,
    Form,
    Input,
    Row,
    message,
    Space,
    DatePicker,
    Table,
    Modal,
    Select,
    Col,
    Card,
    Switch,
    Radio,
    TreeSelect,
    Cascader,
    InputNumber,
    Spin,
} from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { useFormModal } from '@/hooks/useFormModal';
import {
    allotNew,
    manualReconciliationCallback,
} from '@/config/request/testTools';

import './../module/index.scss';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { solarizedlight } from 'react-syntax-highlighter/dist/esm/styles/prism';

type SizeType = Parameters<typeof Form>[0]['size'];
const CustomerApi: React.FC = () => {
    const formTailLayout = {
        labelCol: { span: 4 },
        wrapperCol: { span: 14, offset: 4 },
    };
    const [form] = Form.useForm();
    const [checkNick, setCheckNick] = useState(false);

    // useEffect(() => {
    //     form.validateFields(['nickname']);
    // }, [checkNick, form]);

    // const onCheckboxChange = (e: { target: { checked: boolean; }; }) => {
    //     setCheckNick(e.target.checked);
    // };

    const [isModalOpen, setIsModalOpen] = useState(false);
    const [jsonObj, setJsonStr] = useState({});
    const [loading, setLoading] = useState(false);

    const showModal = (obj) => {
        setJsonStr(obj);
        setIsModalOpen(true);
    };

    const handleOk = () => {
        setIsModalOpen(false);
    };

    const handleCancel = () => {
        setIsModalOpen(false);
    };

    const onCheck = async () => {
        setLoading(true);
        try {
            const values = await form.validateFields();

            const res = await allotNew(values);

            if (res.data != null) {
                setLoading(false);
            }

            showModal(res.data);

            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };

    const onCheck1 = async () => {
        setLoading(true);
        try {
            const values = await form.validateFields();
            const res = await manualReconciliationCallback(values);

            if (res.data != null) {
                setLoading(false);
            }

            showModal(res.data);

            console.log('Success:', res);
        } catch (errorInfo) {
            console.log('Failed:', errorInfo);
        }
    };

    return (
        <div className="bg-white p-2.5">
            {loading ? (
                <Spin tip="Loading" size="large">
                    <div className="content" />
                </Spin>
            ) : (
                <div>
                    <Row gutter={16} style={{ marginBottom: '20px' }}>
                        <Col span={12}>
                            <Card title="一键分单" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={form}
                                >
                                    <Form.Item
                                        label="订单号："
                                        name="platformOrderNo"
                                    >
                                        <Input />
                                    </Form.Item>

                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                        <Col span={12}>
                            <Card title="采购异常对账" bordered={false}>
                                <Form
                                    labelCol={{ span: 4 }}
                                    wrapperCol={{ span: 14 }}
                                    layout="horizontal"
                                    form={form}
                                >
                                    <Form.Item
                                        label="采购异常单号："
                                        name="purchaseAbnormalOrder"
                                    >
                                        <Input />
                                    </Form.Item>
                                    <Form.Item
                                        label="异常来源："
                                        name="bizType"
                                    >
                                        <Select>
                                            <Select.Option value="2">
                                                线上采购
                                            </Select.Option>
                                            <Select.Option value="1">
                                                档口采购
                                            </Select.Option>
                                            <Select.Option value="5">
                                                线下采购
                                            </Select.Option>
                                            <Select.Option value="8">
                                                线下结算
                                            </Select.Option>
                                            <Select.Option value="3">
                                                OEM大货
                                            </Select.Option>
                                            <Select.Option value="4">
                                                OEM样品
                                            </Select.Option>
                                        </Select>
                                    </Form.Item>
                                    <Form.Item {...formTailLayout}>
                                        <Button
                                            type="primary"
                                            style={{ width: '100%' }}
                                            onClick={onCheck1}
                                        >
                                            提交
                                        </Button>
                                    </Form.Item>
                                </Form>
                            </Card>
                        </Col>
                    </Row>

                    <Modal
                        title="执行结果："
                        open={isModalOpen}
                        onOk={handleOk}
                        onCancel={handleCancel}
                    >
                        <SyntaxHighlighter
                            language="javascript"
                            style={solarizedlight}
                        >
                            {JSON.stringify(jsonObj, null, 4)}
                        </SyntaxHighlighter>
                    </Modal>
                </div>
            )}
        </div>
    );
};

export default CustomerApi;
